import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Form extends Component{
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      remark: ''
    };
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handleSubmit(event) {
    
    alert(`姓名：${this.state.value}\n签名：${this.state.remark}`)
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={(e) => this.handleSubmit(e)} className='container-fluid'>
        <label>
          姓名: <input type="text" name="value" value={this.state.value} onChange={(e) => this.handleChange(e)} />
          签名: <textarea type="text" name="remark" value={this.state.remark} onChange={(e) => this.handleChange(e)} />
        </label>
        <input type='submit' value='Submit' />
      </form>
    )
  }
}

Form.propTypes = {
  value: PropTypes.string
}

export default Form;